import Icon, * as iconMap from "@ant-design/icons";
import { Card, Col, Row, Tabs } from "antd";
import { iconData } from "./localData";
import styles from './index.less'
import { firstToUpper, strikethroughToHump } from "@/utils";

export type IconPreviewProps = {
  selectIcon: (icon: string) => void;
};

const { TabPane } = Tabs;

// const IconFont = createFromIconfontCN({
//   scriptUrl: [
//     '//at.alicdn.com/t/font_2967916_0h70xj9ow79.js',
//   ],
// });

const IconPreview: React.FC<IconPreviewProps> = (props) => {
  const { selectIcon } = props;

  const handleClick = (icon: string) => {
    selectIcon(icon)
  }

  return (
    <>
      <Tabs defaultActiveKey="direction" centered>
        {iconData.map(data => (
          <TabPane tab={data.description} key={data.category}>
            <Row gutter={10} className={styles.iconPreview}>
              {data.icons.map(icon => {
                const fixIcon = firstToUpper(strikethroughToHump(icon)) + 'Outlined';
                return <Col span={4} key={icon}>
                  <Icon
                    component={iconMap[fixIcon]}
                    onClick={() => handleClick(icon)}
                  />
                </Col>
              })}
            </Row>
          </TabPane>
        )
        )}
      </Tabs>
    </>
  )
}

export default IconPreview
